<template>
	<view class="question" :class="{deleted:hasDeleted}">
		<view v-if="!isWrong" class="question-title">
			<text>{{ question.sectionName }}</text>
		</view>
		<view class="question-main">
			<view class="question-main-card" ref="stack" :class="{ del: isDel }">
				<view class="introduce">
					<rich-text type="text" :nodes="question.bankContent"></rich-text>
				</view>
				<view v-if="question.bankType == 'radio'" class="select">
					<view class="select-item" v-for="item in answerList" :key="item.key">
						<view class="check" :class="getCheckClass(item.key)" @click="checkAnswer(item.key)">
							{{ item.key }}
						</view>
						<view class="content">
							{{ question[`bankAns${item.answer}`] }}
						</view>
					</view>
				</view>
				<view v-else-if="question.bankType == 'checkbox'" class="select">
					<checkbox-group @change="handleChange">
						<view class="select-item" v-for="item in answerList" :key="item.key">
							<view class="checkbox">
								<checkbox :disabled="currentCheck" :value="item.key" />{{ item.key }}
							</view>
							<view class="content">
								{{ question[`bankAns${item.answer}`] }}
							</view>
						</view>
					</checkbox-group>
				</view>
				<view class="delete" @click="handleDelete(question.bankId)"> Delete </view>
			</view>
			<view class="answer" v-if="currentCheck || showAnalyze">
				<view class="answer-mine" v-if="currentCheck">我的答案：<text>{{ currentCheck }}</text></view>
				<view class="answer-real">正确答案：<text>{{ question.bankRightAns }}</text></view>
			</view>
			<view class="collapse">
				<button class="btn" @click="handleCollapse">Collapse</button>
			</view>
			<view class="analyze" v-if="currentCheck || showAnalyze">
				<view class="analyze-title">解析</view>
				<view class="analyze-content">{{ question.bankAnalysis }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 导入vue的ref函数
	import {
		ref,
		watch,
		onMounted,
		nextTick
	} from 'vue';
	import Hammer from 'hammerjs';
	import {
		deleteWrong
	} from '@/api/exam.js';
	// 定义组件接收的props
	const props = defineProps({
		question: {
			type: Object,
			default: () => {},
		},
		isWrong: {
			type: Boolean,
			default: false
		}
	});

	// 定义组件emit的方法
	const emits = defineEmits(['check']);

	// 使用ref定义一个响应式变量，存储当前选中的答案
	const currentCheck = ref('');

	const stack = ref();
	const isDel = ref(false);
	const showAnalyze = ref(false)
	const hasDeleted = ref(false)

	const answerList = [{
			key: 'A',
			answer: 'One',
		},
		{
			key: 'B',
			answer: 'Two',
		},
		{
			key: 'C',
			answer: 'Three',
		},
		{
			key: 'D',
			answer: 'Four',
		},
	];

	/**
	 * 检查答案的函数。
	 * 当用户选择一个答案时调用此函数，如果当前没有选中的答案，则记录下选择的答案，并触发check事件。
	 * @param {string} answer 用户选择的答案
	 */
	const checkAnswer = (answer) => {
		if (currentCheck.value) return;
		currentCheck.value = answer;
		emits('check', props.question.bankId, answer, answer == props.question.bankRightAns);
	};

	/**
	 * 根据当前选中的答案和题目正确的答案，为每个答案选项添加合适的类名。
	 * @param {string} key 答案选项的键值
	 * @returns {Object} 包含激活状态和真实答案状态的类名对象
	 */
	const getCheckClass = (key) => {
		return {
			active: currentCheck.value == key, // 判断当前答案是否被选中
			real: currentCheck.value && props.question.bankRightAns && props.question.bankRightAns ==
				key, // 判断当前答案是否为正确答案
		};
	};

	const handleChange = ({
		detail
	}) => {
		console.log('props.question.bankRightAns-->', props.question.bankRightAns.split(','));
		console.log('多选框-->', detail, detail.value.length, props.question.bankRightAns.split(',').length);
		if (detail.value.length == props.question.bankRightAns.split(',').length) {
			currentCheck.value = detail.value.join(',');
			emits('check', props.question.bankId, currentCheck.value, currentCheck.value == props.question
				.bankRightAns);
		}
	};

	// 打开解析
	const handleCollapse = () => {
		showAnalyze.value = true
	}

	const createTouch = () => {
		// 创建Hammer实例并添加滑动侦听器
		const manager = new Hammer.Manager(stack.value.$el);

		const Swipe = new Hammer.Swipe();
		manager.add(Swipe);

		manager.on('swipeleft', (e) => {
			console.log("e-->", e)
			isDel.value = true;
		});

		manager.on('swiperight', (e) => {
			isDel.value = false;
		});
	};



	const handleDelete = (bankId) => {
		deleteWrong(bankId);
		hasDeleted.value = true
	};


	onMounted(() => {
		nextTick(() => {
			createTouch();
		});
	});


	watch(
		() => props.question,
		(val) => {
			if (!val) return;
			currentCheck.value = undefined;
		}
	);
</script>

<style lang="scss" scoped>
	.question {
		width: 100%;
		// height: 100%;
		// overflow: auto;
		padding-bottom: 200rpx;

		&.deleted {
			opacity: 0;
			height: 0;
			overflow: hidden;
		}

		&-title {
			height: 70rpx;
			width: 100%;
			text-align: left;

			text {
				display: inline-block;
				height: 70rpx;
				padding: 14rpx 30rpx;
				text-align: center;
				border-radius: 40rpx;
				background: #b8cef6;
				color: #000000;
				text-align: center;
				font-family: 'PINGFANG-HEAVY';
				font-size: 32rpx;
				font-weight: 400;
			}
		}

		&-main {
			padding: 10rpx 0;

			&-card {
				position: relative;

				&.del {

					.introduce,
					.select {
						margin-left: -140rpx;
					}
				}
			}

			.introduce {
				width: 100%;
				color: #f8fdff;
				font-family: 'PINGFANG-MEDIUM';
				font-size: 31.4rpx;
				font-style: normal;
				font-weight: 400;
				line-height: 47.09rpx;
				text-indent: 2em;
				transition: all 0.5s;
				position: relative;
				z-index: 10;
				background-color: #000000;
			}

			.select {
				width: 100%;
				padding: 32rpx;
				transition: all 0.5s;
				position: relative;
				z-index: 10;
				background-color: #000000;

				&-item {
					width: 100%;
					display: flex;
					align-items: center;
					gap: 20rpx;

					&+.select-item {
						margin-top: 40rpx;
					}

					.checkbox {
						flex: none;
						width: 84rpx;
						height: 54rpx;
						line-height: 54rpx;
						background: #000000;
						color: #b8cef6;
						font-family: 'PINGFAN-MEDIUM';
						font-size: 28rpx;
						font-weight: 400;
						cursor: pointer;
						// display: flex;
						// align-items: center;
					}

					.check {
						flex: none;
						width: 54rpx;
						height: 54rpx;
						border: 4rpx solid #b8cef6;
						border-radius: 50%;
						text-align: center;
						line-height: 46rpx;
						background: #000000;
						color: #b8cef6;
						font-family: 'PINGFAN-MEDIUM';
						font-size: 28rpx;
						font-weight: 400;
						cursor: pointer;
						transition: all 0.25s;

						&.active {
							background-color: #8a96a0;
							border: 1rpx solid #b8cef6;
							color: #ffffff;
							line-height: 52rpx;
						}

						&.real,
						&.real.active {
							background: #b8cef6;
							color: #020202;
							border: 4rpx solid #b8cef6;
							line-height: 46rpx;
						}
					}

					.content {
						color: #f8fdff;
						font-family: 'PINGFANG-MEDIUM';
						font-size: 31.4rpx;
						font-style: normal;
						font-weight: 400;
						line-height: 47.09rpx;
					}
				}
			}

			.answer {
				width: 100%;

				&-mine {
					border-radius: 12rpx;
					background: rgba(113, 113, 113, 0.5);
					height: 70rpx;
					color: #bcbbbb;
					text-align: center;
					font-family: 'PINGFANG-BOLD';
					font-size: 34rpx;
					font-weight: 400;
					line-height: 70rpx;

					text {
						color: #8fafff;
						text-align: center;
						font-family: 'PINGFANG-HEAVY';
						font-size: 34rpx;
						font-weight: 400;
					}
				}

				&-real {
					height: 70rpx;
					flex-shrink: 0;
					color: #ffffff;
					text-align: center;
					font-family: 'PINGFANG-BOLD';
					font-size: 34rpx;
					font-weight: 400;
					line-height: 70rpx;

					text {
						color: #0d5ada;
						text-align: center;
						font-family: 'PINGFANG-HEAVY';
						font-size: 34rpx;
						font-weight: 400;
					}
				}
			}

			.analyze {
				width: 100%;

				&-title {
					height: 50rpx;
					color: #c2c3c6;
					text-align: left;
					font-family: 'PINGFANG-MEDIUM';
					font-size: 34rpx;
					font-style: normal;
					font-weight: 400;
					line-height: 50rpx;
					position: relative;
					padding-left: 30rpx;

					&::after {
						content: '';
						position: absolute;
						left: 10rpx;
						top: 0;
						bottom: 0;
						margin: auto;
						width: 8rpx;
						height: 50rpx;
						background-color: #b8cef6;
					}
				}

				&-content {
					margin-top: 20rpx;
					color: #9f9999;
					text-align: left;
					font-family: 'PINGFANG-MEDIUM';
					font-size: 34rpx;
					font-weight: 400;
					text-indent: 2em;
				}
			}
		}
	}

	.collapse {
		width: 100%;
		position: relative;
		margin: 40rpx 0;
		height: 70rpx;
		text-align: right;

		.btn {
			position: absolute;
			right: 0;
			bottom: 0rpx;
			margin: auto;
			width: 218rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			color: #b8cef6;
			font-family: 'PINGFANG-BOLD';
			font-size: 26.16rpx;
			font-style: normal;
			font-weight: 400;
			border-radius: 35rpx;
			border: 2rpx solid #b8cef6;
			background-color: transparent;
		}

	}

	.delete {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		height: 100%;
		z-index: 1;
		width: 140rpx;
		// height: calc(100% - 80rpx);
		height: 100%;
		background-color: #f56c6c;
		color: #ffffff;
		text-align: center;
		font-family: 'PINGFANG-HEAVY';
		font-size: 28rpx;
		font-weight: 400;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>